<!--合伙人-昨日交易记录-->
<template>
  <div class="all bg1">
  
    <!--筛选-->
    <div class="types">
      <div class="type" @click="showClcik">
        <text class="font26 text1">{{this.inviteCode.length?this.codeName+"("+this.inviteCode+")":this.codeName}}</text>
        <LImage class="img-arrow" :src="Config.img('app_more_btn_Invitation_record.png')"></LImage>
      </div>

      <text class="font22 text3">{{T('昨日邀请总成交量')+'：'+this.yestodayTotalVolume+' USDT'}}</text>
    </div>


    <!--昨日交易记录-->

    <div class="list bg2">

      <div class="row">
        <text class="font26 text3 all">{{T('好友UID')}}</text>
        <text class="font26 text3">{{T('成交量')+"（USDT)"}}</text>
      </div>
      <list class="all bg2" :loadmoreoffset="50" @loadmore="httpsDealRecode">
        <cell v-for="(item, index) in datas" v-bind:key="index">

          <div class="cell" v-if="item.uuid">
            <div class="row">
              <text class="font26 text3 all">{{item.uuid}}</text>
              <text class="font26 text3">{{item.dayVolume}}</text>
            </div>
            <div class="line line1"></div>
          </div>
          
          <div class="genduo" v-else>
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>
      </list>

    </div>

    <!--类型筛选弹窗-->
    <div v-if="type" @click="showClcik" class="shaixuan-type-content"></div>
    <div v-if="type" class="shaixuan-type-bg">

      <div @click="changeType('', T('全部'))" :class="['shaixuan-type-item', inviteCode.length == 0 ? 'shaixuan-type-item-selet' : '']">
        <text class="shaixuan-type-text">{{T('全部')}}</text>
      </div>

      <div v-for="(item, index) in codeList" v-bind:key="index" @click="changeType(item.inviteCode, item.codeName)" :class="['shaixuan-type-item', item.inviteCode == inviteCode ? 'shaixuan-type-item-selet' : '']">
        <text class="shaixuan-type-text">{{item.codeName + "(" + item.inviteCode + ")"}}</text>
        <div class="shaixuan-type-line"></div>
      </div>
      
    </div>
    <!--类型筛选弹窗-->
  </div>
</template>


<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  flex: 1;
}

/************************ 筛选*/
.types {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 40px;
}
.type {
  flex-direction: row;
  align-items: center;
}
.img-arrow {
  width:22px;
  height:13px;
  margin-left: 22px;
}

/************************ 邀请记录*/
.list {
  flex: 1;
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 40px;
}
.line{
  height:1px;
}
.genduo{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100px;
}
/*筛选*/
.shaixuan-row{
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 750;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 50px;
  padding-bottom: 20px;
}
.shaixuan-bg{
  flex-direction: row;
  align-items: center;
}
.shaixuan-text{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(254,254,254,1);
}
.shaixuan-jiantou{
  width:22px;
  height:13px;
  margin-left: 22px;
  margin-right: 13px;
}
.tongji-bg{
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 80px;
}
.tongji-text{
  font-size:22px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(144,154,180,1);
}

/*类型选项*/
.shaixuan-type-content{
  width:750px;
  position: absolute;
  z-index: 9;
  top:0;
  right: 0;
  bottom:0;
  left:0;
}
.shaixuan-type-bg{
    width:320px;
    background-color:rgba(39,43,46,1);
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.32);
    border-radius:4px;
    position: absolute;
    z-index: 10;
    top: 90px;
    left: 0px;
}
.shaixuan-type-item{
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width:320px;
    height:84px;
    background-color:#272B2E;
}
.shaixuan-type-item:active{
  background-color:#32373C;
}
.shaixuan-type-item-selet{
    background-color:#32373C;
}
.shaixuan-type-line{
  width:300px;
  height:1px;
  background-color:#121D39;
  opacity:0.5;
}
.shaixuan-type-text{
  height:83px;
  line-height:83px;
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:#ffffff;
}
</style>

<script>
import jmodal from "@/_js/modal";
import jnavigator from "@/_js/navigator";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https"; ;

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("昨日交易记录"));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,

      yestodayTotalVolume:"0",

      type:false, //类型筛选显示
      codeList:undefined, //筛选列表-邀请码
      inviteCode:"", //当前选中邀请码
      codeName:"全部", ///当前筛选类型

      datas:[], //数据源
      pageNo:0, //当前页面
 
      onLoad:false, //true加载中
      max:false, //true无跟多数据
    };
  },

   //即将显示
  mounted() {

    this.yestodayTotalVolume = navigator.getParam('yestodayTotalVolume')+"";
    
    this.httpInviteCodes(false);
    setTimeout(() => {
      jmodal.showLoad();
      this.httpsDealRecode();
    }, 100);
  },

  methods: {
    
    /****************** https*/
    //https筛选列表-邀请码
    httpInviteCodes(bool){

      if(bool) jmodal.showLoad();
      var param = {};
      jhttps.post("partner/queryMyInviteCode",param,true,(data)=>{
        if(bool) jmodal.hideLoad();
        if(data.status == 200){
          this.codeList = data.data.inviteCodeList;
          if(bool) this.type = true;
        }else{
          if(bool) jmodal.toast(data.msg);
        }
      });
    },

    //httpshttp昨日交易记录
    httpsDealRecode(){
      
      if(this.onLoad) return;
      if(this.max) return;

      this.onLoad = true;
      var param = {'pageNo':this.pageNo+1,
                   'inviteCode':this.inviteCode};
      jhttps.post("partner/queryMoreYesterdayRecode",param,true,(data)=>{
          jmodal.hideLoad();
          this.onLoad = false;
          if(data.status == 200){
            this.pageNo++;
            this.datas.push(...data.data);
             if(data.data.length < 20) {
              this.max = true;
              this.datas.push({});
            }
          }else{
            jmodal.toast(data.msg);
          }
      });
    },

    /*************************** 按钮*/
    //显示筛选类型
    showClcik(){
      if(!this.codeList) {
        this.httpInviteCodes(true);
        return;
      }

      if(this.type){
        this.type = false;
      }else{
        this.type = true;
      }
    },

    //选中筛选类型
    changeType(inviteCode, codeName){

      this.inviteCode = inviteCode;
      this.codeName = codeName;

      this.type = false;
      this.datas = [];
      this.pageNo = 0;
      this.onLoad = false;
      this.max = false;

      jmodal.showLoad();
      this.httpsDealRecode();
    },
  },
};
</script>
